<template>
    <view class="container">
        <view class="warper">
            <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2" :animation="false"
                @custom="onSearch"></u-search>
            <scroll-view :scroll-y="true" class="cardWrap" @scrolltolower="onScrollToLower">
                <!-- 组件 -->
                <view v-if="planList.length">
                    <view class="card" v-for="item in planList" :key="item.id" @click="onGoDetaile(item)">
                        <view class="flex" style="position: relative;">
                            <image class="topIconStyle" src="../static/images/teachingMaterial/topIcon.svg" style="width: 76rpx;height: 74rpx" v-if="item.isCollect"/>
                            <image
                                :src="item.cover"
                                :style="{ width: '128rpx', height: '100%' }" />
                            <view style="margin: 28rpx 0 28rpx 42rpx;justify-content:space-between; width: 380rpx;"
                                class="flex flex-column">
                                <view style="font-size: 32rpx;font-weight: 400;" class="oneWrap">{{ item.name }}</view>
                                <view style="color: #666666; font-size: 24rpx" class="oneWrap">编写人：{{ item.author }}</view>
                                <view style="color: #666666; font-size: 24rpx" class="oneWrap">出版社：{{ item.publisher }}</view>
                            </view>
                        </view>
                        <view class="center" style="padding-top: 28rpx; align-items: baseline; display: flex;">
                            <view class="center">
                                <text style="color: #666666; font-size: 24rpx">查看</text>
                                <image :src="'/static/images/teachingMaterial/leftArrow.svg'"
                                    style="width: 16rpx;height: 24rpx;margin-left: 8rpx;" />
                            </view>
                        </view>
                    </view>
                    <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
                </view>
                <view v-else style="margin-top: 20%">
                    <u-empty text="暂无数据" mode="list"></u-empty>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { textbookList, textbookInfo } from "../services/TeachingMaterialService";
export default {
    data() {
        return {
            queryData: {
                pageNo: 1,
                pageSize: 10,
                name: ""
            },
            searchValue: "",
            safeAreaInsets: {},
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
        }
    },
    computed: {},
    onLoad() {
        // console.log("---20")
        // 初始化数据
        // this.onGetListData(this.queryData);
    },
    onShow(){
        console.log("---63");
         this.onGetListData(this.queryData);
    },
    watch: {
        queryData: {
            handler: function (newData, oldData) {
                this.onGetListData(newData)
            },
            deep: true
        }
    },
    methods: {
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        // 滚动触发事件
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        // 获取数据      
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            textbookList(queryData).then(res => {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        // 搜索
        onSearch() {
            
            this.queryData = {
                ...this.queryData,
                name: this.searchValue,
                pageNo: 1
            }
        },
        // 去详情页
        onGoDetaile(record) {
            uni.navigateTo({
                url: `/teachingMaterial/materialDetail?info=${encodeURIComponent(JSON.stringify(record))}`
            })
        }
    },
    beforeMount() {

        uni.getSystemInfo({
            success: (res) => {
                // console.log(res, "--26")
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })

    },


}
</script>

<style lang="scss">
page {
    background: #ffffff !important;
}

.container {
    padding: 30rpx;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;

    .warper {
        width: 100%;
        height: 100%;
        margin-top: 32rpx;
        
        .cardWrap {
            height: calc(100vh - 180rpx);
            margin-top: 32rpx;

            .card {
                height: 172rpx;
                /* background-color: red; */
                background-color: #F9F9F9;
                display: flex;
                justify-content: space-between;
                padding: 12rpx 30rpx 12rpx 24rpx;
                border-radius: 24rpx;
                margin-bottom: 32rpx;
                .topIconStyle{
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
    }
}
</style>